Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / ColourPickerDropdown.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-click-outsideTff7b72=Ta5d6ff"Tb4b4b4{ Te6edf3handlerTff7b72: Te6edf3onClickOutsideMenuTb4b4b4, Te6edf3captureTff7b72: Tff7b72true Tb4b4b4}Ta5d6ff"

Te6edf3classTff7b72=Ta5d6ff"cursor-default relative inline-block text-left"

Tb4b4b4>

T8b949e<!-- menu button -->

Tb4b4b4<Tff7b72div Te6edf3refTff7b72=Ta5d6ff"dropdown-button" Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3toggleMenuTa5d6ff"Tb4b4b4>

Tb4b4b4<Tff7b72slotTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"size-8 border border-gray-300 dark:border-zinc-700 rounded-sm shadow-sm cursor-pointer"

Tb4b4b4:Te6edf3styleTff7b72=Ta5d6ff"Tb4b4b4{ Ta5d6ff'background-color'Tff7b72: Te6edf3colour Tb4b4b4}Ta5d6ff"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72slotTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- drop down menu -->

Tb4b4b4<Tff7b72Transition

Te6edf3enter-active-classTff7b72=Ta5d6ff"transition ease-out duration-100"

Te6edf3enter-from-classTff7b72=Ta5d6ff"transform opacity-0 scale-95"

Te6edf3enter-to-classTff7b72=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-active-classTff7b72=Ta5d6ff"transition ease-in duration-75"

Te6edf3leave-from-classTff7b72=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-to-classTff7b72=Ta5d6ff"transform opacity-0 scale-95"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isShowingMenuTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"absolute left-0 z-100 mt-2"Tb4b4b4>

Tb4b4b4<Tff7b72v-color-picker

Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3colourPickerValueTa5d6ff"

Tb4b4b4:Te6edf3modesTff7b72=Ta5d6ff"Tb4b4b4[Ta5d6ff'hex'Tb4b4b4]Ta5d6ff"

Te6edf3hide-inputs

Te6edf3hide-sliders

Te6edf3show-swatches

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72v-color-pickerTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72TransitionTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"ColourPickerDropdown"Tb4b4b4,

Te6edf3propsTff7b72: Tb4b4b4{

Te6edf3colourTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657StringTb4b4b4,

Tff7b72defaultTff7b72: Ta5d6ff""Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3emitsTff7b72: Tb4b4b4[Ta5d6ff"update:colour"Tb4b4b4]Tb4b4b4,

Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tb4b4b4{

Te6edf3isShowingMenuTff7b72: Tff7b72falseTb4b4b4,

Te6edf3colourPickerValueTff7b72: Tff7b72nullTb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3watchTff7b72: Tb4b4b4{

Te6edf3colourTb4b4b4(Tb4b4b4) Tb4b4b4{

T8b949e// update internal colour picker value when parent changes value of v-model:colour

Tff7b72thisTb4b4b4.Te6edf3colourPickerValue Tff7b72= Tff7b72thisTb4b4b4.Te6edf3colourTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3colourPickerValueTb4b4b4(Tb4b4b4) Tb4b4b4{

T8b949e// get current colour picker value

Tff7b72var Te6edf3value Tff7b72= Tff7b72thisTb4b4b4.Te6edf3colourPickerValueTb4b4b4;

T8b949e// remove alpha channel from hex colour if present

Tff7b72if Tb4b4b4(Te6edf3valueTb4b4b4.Te6edf3length Tff7b72=== T79c0ff9Tb4b4b4) Tb4b4b4{

Te6edf3value Tff7b72= Te6edf3valueTb4b4b4.Te6edf3substringTb4b4b4(T79c0ff0Tb4b4b4, T79c0ff7Tb4b4b4)Tb4b4b4;

Tb4b4b4}

T8b949e// fire v-model:colour update event

Tff7b72thisTb4b4b4.Te6edf3$emitTb4b4b4(Ta5d6ff"update:colour"Tb4b4b4, Te6edf3valueTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3methodsTff7b72: Tb4b4b4{

Te6edf3toggleMenuTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isShowingMenuTb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3hideMenuTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4} Tff7b72else Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3showMenuTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Te6edf3showMenuTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72trueTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3hideMenuTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72falseTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3onClickOutsideMenuTb4b4b4(Te6edf3eventTb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isShowingMenuTb4b4b4) Tb4b4b4{

Te6edf3eventTb4b4b4.Te6edf3preventDefaultTb4b4b4(Tb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3hideMenuTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>